import React, { Component } from 'react';
import { withStyles } from 'material-ui/styles';
import Card, { CardActions, CardContent, CardMedia } from 'material-ui/Card';
import FavoriteIcon from 'material-ui-icons/Favorite';
import ShareIcon from 'material-ui-icons/Share';
import IconButton from 'material-ui/IconButton';
import Typography from 'material-ui/Typography';
import classnames from 'classnames';
import green from 'material-ui/colors/green';
import red from 'material-ui/colors/red';
import _ from 'lodash'


const styles = {
  card: {
    boxShadow: '0px 1px 1px 0px rgba(0, 0, 0, 0.3)'
  },
  media: {
    height: 214,
  },
  toRow: {
    display: 'flex',
    flexDirection: 'row',
    marginLeft: 4
  },
  cardContent: {
    flex: 1,
    overflow: 'hidden',
  },
  site: {
    marginTop: 6,
    marginBottom: 0
  },
  price: {
    color: red[400],
  },
  free: {
    color: green[400],
  },
  root: {

  },
  hover: {
    transform: 'scale(1.01,1.01)',
    transition: 'all 200ms ease'
  },
  notHover: {
    transform: 'scale(1,1)',
    transition: 'all 200ms ease'
  },
  cardFooter: {
    display: 'flex',
    padding: '0 20px 10px 20px',
    justifyContent: 'space-between'
  },
  hitNumber: {
    lineHeight: '24px'
  },
  title: {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  }
};

function isFree(course) {
  return course.price === 0 || course.price === undefined;
}

function getPrice(course) {
  return isFree(course) ? '免费': `￥${course.price}`
}

@withStyles(styles)
class Course extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isHover: false
    }
  }

  onMouseOver() {
    this.setState({
      isHover: true
    })
  }

  onMouseLeave() {
    this.setState({
      isHover: false
    })
  }

  onBookmark(course) {
    this.props.addBookmark(course)
  }

  onHit(course){
    this.props.addHit(course)
  }

  onShare(course){
    this.props.addShare(course)
  }

  render() {
    const {classes, course, isAuthed} = this.props;
    const hitNumber = _.get(course, 'hitN', 0) + _.get(course, 'o_hitN', 0)+_.get(course, 'o_stuN', 0)+_.get(course, 'o_bookmark', 0)
    return (
      <div onMouseOver={() => this.onMouseOver()} onMouseLeave={() => this.onMouseLeave()}>
        <Card className={classnames(classes.card, {[classes.hover]: this.state.isHover}, {[classes.notHover]: !this.state.isHover} )}>
          <a href={course.url} target="new" onClick={() => this.onHit(course)}>
            <CardMedia
              className={classes.media}
              image={course.cover}
              title={course.subtitle}
            />
          </a>
          <div className={classes.toRow}>
            <CardContent className={classes.cardContent}>
              <Typography type="body2" className={classes.title}>
                {course.title}
              </Typography>
              <Typography type="caption" className={classes.site}>
                {course.site}
              </Typography>
            </CardContent>
            <CardActions className={classes.actions}>
                {
                  isAuthed? (
                    <IconButton aria-label="收藏" onClick={() => this.onBookmark(course)}>
                      <FavoriteIcon />
                    </IconButton>
                  )
                  :
                  (
                    <div></div>
                  )
                }
                <IconButton aria-label="分享" onClick={() => this.onShare(course)}>
                  <ShareIcon />
                </IconButton>
            </CardActions>
          </div>
          <div className={classes.cardFooter}>
            <Typography type="body2" className={classnames(classes.price, {[classes.free]: isFree(course)})}>
                {getPrice(course)}
            </Typography>
            <Typography type="caption" className={classes.hitNumber}>
                {hitNumber}人看过
            </Typography>
          </div>
        </Card>
      </div>
    );
  }
}

export default Course;